<template>
  <div style="position: relative;">
    <div class="ht-head-wrap">
      <div class="title-item title-item-active">
        <router-link to="/administrative">县情概况</router-link>
      </div>
      <div class="title-item">
        <router-link to="/party">党建引领</router-link>
      </div>
      <div class="ht-top">
        <div class="ht-title"></div>
      </div>
      <div class="title-item">
        <router-link to="/econdev/">经济发展</router-link>
      </div>
      <div class="title-item">
        <router-link to="/humanistic">人文旅游</router-link>
      </div>
    </div>

    <div class="ht-content clear-float">
      <div class="content-left">
        <div style="width:610px;float:left;">
          <div class="card-item" style="height: 478px; margin-bottom:20px;">
            <p class="card-title">全县气象监测以及空气质量</p>
            <div class="card-main clear-float" style="padding-left:34px;">
              <div class="right-titem-one">
                <span class="titem-span">一级天数</span>
                <img src="../../assets/imgs/img-leaf.png" alt="">
                <span class="titem-span-two">11</span><i>天</i>
                <span class="titem-span-three">同比减少<i>9天</i></span>

              </div>
              <div class="right-titem-one">
                <span class="titem-span">二级天数</span>
                <img src="../../assets/imgs/img-leaf-two.png" alt="">
                <span class="titem-span-two">170</span><i>天</i>
                <span class="titem-span-three">同比减少<i>67天</i></span>
              </div>
              <div class="right-titem-one">
                <span class="titem-span-bottom">首要污染物</span>
                <span class="titem-spanT-bottom">PM10</span>
                <span class="titem-span-bottom" style="color: #96E131;">浓度</span>
                <span class="titem-spanT-bottom">123</span>
                <span class="titem-spanS-bottom">毫克/立方米</span>
              </div>

              <div class="weather-box">
                <div class="weather-item">
                  <p class="txt">气象监测站</p>
                  <p class="number">1<span> 个</span></p>
                </div>
                <div class="weather-item" style="margin:0 15px;">
                  <p class="txt">防雹、增雨受益覆盖面积</p>
                  <p class="number">1494<span> 平方公里</span></p>
                </div>
                <div class="weather-item">
                  <p class="txt">卫星云图接收站</p>
                  <p class="number">3<span> 个</span></p>
                </div>
              </div>
            </div>
          </div>

          <div class="card-item" style="height: 505px; margin-bottom:20px;">
            <p class="card-title" style="margin-bottom:37px;">全县绿化面积以及退耕情况</p>
            <div class="right-mitem-one">
              <span class="right-list-span-one">绿化覆盖</span>
              <span class="right-list-span-two"></span>
              <span class="right-list-span-three">647.83</span><i>万平方米</i>
              <span class="right-list-span-four">44.37%</span><i>覆盖率</i>
            </div>
            <div class="right-mitem-one"
              style="background:rgba(22,188,144,0.1);box-shadow:0px 0px 2px 3px rgba(13,175,144,0.26);">
              <span class="right-list-span-one" style="color: #0DC39C;">绿地面积</span>
              <span class="right-list-spanT-two"></span>
              <span class="right-list-span-three">625.92</span><i style="color: #0DC39C;">万平方米</i>
              <span class="right-list-span-four">42.87%</span><i style="color: #0DC39C;">覆盖率</i>
            </div>
            <div class="right-mitem-one"
              style="background:rgba(22,188,144,0.1);box-shadow:0px 0px 2px 3px rgba(13,175,144,0.26);">
              <span class="right-list-span-one" style="color: #0DC39C;">公园绿地</span>
              <span class="right-list-spanT-two"></span>
              <span class="right-list-span-three">54.66</span><i style="color: #0DC39C;">万平方米</i>
              <span class="right-list-span-four">11.37</span><i style="color: #0DC39C;">人均平方米</i>
            </div>
            <div class="right-mitem-one">
              <span class="right-list-span-one">木材产量</span>
              <span class="right-list-span-two" style="width:88px;"></span>
              <span class="right-list-span-three">19530</span><i>立方米</i>
              <span class="right-list-span-four">95.3%</span><i>增长率</i>
            </div>
            <div class="right-mitem-one"
              style="background:rgba(22,188,144,0.1);box-shadow:0px 0px 2px 3px rgba(13,175,144,0.26);">
              <span class="right-list-span-one" style="color: #0DC39C;">补贴造林</span>
              <span class="right-list-spanT-two" style="width:80px;"></span>
              <span class="right-list-span-three">1058</span><i style="color: #0DC39C;">公顷</i>
              <span class="right-list-span-four">23%</span><i style="color: #0DC39C;">减少率</i>
            </div>
          </div>

          <div class="card-item">
            <p class="card-title">固定、移动电话用户数</p>
            <div class="card-left-listTwo" style="height: 262px; padding:10px 0;">
              <common-mix-chart ref="phoneMixLine" :config="phoneMixLineConfig"></common-mix-chart>
              <span style="display: inline-block;margin: -260px 0 0 25px;float: left;font-size: 12px;">(万户)</span>
            </div>
          </div>
        </div>

        <div style="width:610px;float:left;margin:0 20px;">

          <div class="card-item" style="height: 479px; margin-bottom:20px;">
            <p class="card-title">2014-2018海关进出口总额及其增长速度</p>
            <div class="card-main" style="height:385px;padding:20px 0;">
                <common-mix-chart ref="customsInOutMixLine" :config="customsInOutMixLineConfig">
                </common-mix-chart>
            </div>
          </div>
          <div class="card-item" style="margin-bottom:20px;">
            <p class="card-title">公路建设情况</p>
            <div class="card-main-road">
              <div class="road-detail-box">
                <p class="road-txt">公路通车里程<span class="road-num">2108.2</span>公里</p>
                <p class="road-txt">高速公路<span class="highway-num">74.9</span>公里</p>
                <road-detail-chart ref="roadDetailPlan" :config="roadPlanConfig"
                  style="height: 188px;width: 188px;margin-top:30px;"></road-detail-chart>
                <p class="road-txt road-txt-bus">公交车线路有<span class="bus-num">12</span>条</p>
              </div>
              <div class="road-detail-box">
                <p class="road-txt">公路通车里程<span class="road-num">2108.2</span>公里</p>
                <p class="road-txt">高速公路<span class="highway-num">74.9</span>公里</p>
                <road-detail-chart ref="roadDetailReality" :config="roadRealityConfig"
                  style="height: 188px;width: 188px;margin-top:30px;"></road-detail-chart>
                <p class="road-txt road-txt-bus">公交车线路有<span class="bus-num">12</span>条</p>
              </div>
            </div>
          </div>
          <div class="card-item" style="height: 440px;width: 610px;">
            <p class="card-title">公共交通工具及乡镇通客车率</p>
            <div class="card-left-listOne">
              <div class="card-left-list-One">
                <span class="card-list-spanOne" style="margin-top: 56px;">公共汽车</span>
                <span class="card-list-spanTwo"></span>
                <span class="card-list-spanThree">190</span><i style="color: #16BC90;">辆</i>
              </div>
              <div class="card-left-list-Two">
                <span class="card-list-spanOne" style="margin-top: 67px;">出租车</span>
                <span class="card-list-spanTwo"></span>
                <span class="card-list-spanThree">417</span><i style="color: #F6A330;">辆</i>
              </div>
              <div class="card-left-list-Three">
                <span class="card-list-spanOne" style="margin-top: 72px;">行政村</span>
                <span class="card-list-spanTwo">
                  <el-progress color="#09A9FF" :percentage="54.36" :show-text='false' :stroke-width="18"></el-progress>
                </span>
                <span class="card-list-spanThree">54.36%</span>
              </div>
              <div class="card-left-list-Four">
                <span class="card-list-spanOne" style="margin-top: 73px;">乡镇</span>
                <span class="card-list-spanTwo">
                  <el-progress color="#E5CE10" :percentage="49.28" :show-text='false' :stroke-width="18"></el-progress>
                </span>
                <span class="card-list-spanThree">49.28%</span>
              </div>
            </div>
          </div>
        </div>

        <div class="gen-left-subwrap">
          <div class="card-item">
            <p class="card-title">本年全县土地使用情况占比</p>
            <div>
              <common-pieNew-chart ref="countyLandPie" :config="countyLandPieConfig" style="height: 425px">
              </common-pieNew-chart>
            </div>
          </div>
          <div class="card-item" style="height: 479px;">
            <p class="card-title">2014-2018年居民人均可支配收入及其增长速度</p>
            <div class="card-main">
              <common-mix-chart v-if="activeBtn == 'town'" ref="townIncomeMixLine" :config="townIncomeMixLineConfig" style="height: 366px;">
              </common-mix-chart>
              <common-mix-chart v-else-if="activeBtn == 'countryside'" ref="countrysideIncomeMixLine" :config="countrysideIncomeMixLineConfig" style="height: 366px;">
              </common-mix-chart>
              <div class="town-countryside-box">
                <button :class="['town-countryside-btn',activeBtn == 'town' ? 'active' : '']"
                  @click="handleChangeClick('town')">城镇居民</button>
                <button :class="['town-countryside-btn',activeBtn == 'countryside' ? 'active' : '']"
                  @click="handleChangeClick('countryside')">农村居民</button>
              </div>
            </div>
          </div>
          <div class="card-item" style="height: 401px;">
            <p class="card-title">本年全县人口自然增长率</p>
            <div style="height: 347px;">
              <common-dualarea-chart ref="populationGrowthRateLine" :config="populationGrowthRateLineConfig">
              </common-dualarea-chart>
            </div>
          </div>
          <div class="card-item" style="height: 401px;">
            <p class="card-title">全县居民保险参保情况</p>
            <div class="insurance-warp">
                <div class="insurance-box" style="width:50%;">
                    <p class="txt">城乡居民养老保险</p>
                    <p class="num">455097<span style="font-size:30px;">人</span></p>
                </div>
                <div class="insurance-box" style="width:50%;">
                    <p class="txt">城乡居民医疗保险</p>
                    <p class="num">653080<span style="font-size:30px;">人</span></p>
                </div>
                <div class="insurance-box" style="width:100%;">
                    <p class="txt">失业保险</p>
                    <p class="num">22555<span style="font-size:30px;">人</span></p>
                </div>
                <div class="insurance-box" style="width:50%;">
                    <p class="txt">工伤保险</p>
                    <p class="num">45158<span style="font-size:30px;">人</span></p>
                </div>
                <div class="insurance-box" style="width:50%;">
                    <p class="txt">生育保险</p>
                    <p class="num">23372<span style="font-size:30px;">人</span></p>
                </div>
            </div>
          </div>
          <div class="card-item" style="width:1240px;height: 440px;">
            <p class="card-title">历年全县总人口数</p>
            <common-mix-chart ref="populationMixLine" :config="populationMixLineConfig" style="height: 366px;">
            </common-mix-chart>
          </div>
        </div>

      </div>

      <div class="content-middle">
        <!-- <iframe width="100%" height="100%" frameborder="0" src='https://www.thingjs.com/pp/49e622c9db5d2eadf62fa08d'></iframe> -->

        <!-- <div class="total-box box-1">
          <p class="total-name">全县辖区总人口（人）</p>
          <p class="total-number">764,551</p>
        </div>
        <div class="total-box box-2">
          <p class="total-name">全县辖区总面积（平方公里）</p>
          <p class="total-number">1,563</p>
        </div>
        <div class="total-box box-3">
          <p class="total-name">全县辖区内耕地面积（亩）</p>
          <p class="total-number">890,000</p> 
        </div> -->
        <div class="total-box box-1">
          <p class="total-name">全县全地区生产总值（亿元）</p>
          <p class="total-number">168.61</p>
        </div>
        <div class="total-box box-2">
          <p class="total-name">全县居民人均可 支配收入（元）</p>
          <p class="total-number">28,739</p>
        </div>
        <div class="total-box box-3">
          <p class="total-name">全县辖区农业经营户（户）</p>
          <p class="total-number">160,000</p>
        </div>

        <div class="gdp-cpi-box gdp-box">
          <div class="card-title">2014-2018年全县生产总值及其增长速度</div>
          <div class="gdp-cpi-main">
              <common-mix-chart ref="gdpMixChart" :config="gdpMixConfig"></common-mix-chart>
          </div>
        </div>
        <div class="gdp-cpi-box cpi-box">
          <div class="card-title">2014-2018年社会消费品零售总额及其增长速度</div>
          <div class="gdp-cpi-main">
              <common-mix-chart ref="cpiMixChart" :config="cpiMixConfig"></common-mix-chart>
          </div>
        </div>

        <div class="map-mask" style="pointer-events: none;">
          <img src="../../assets/imgs/v2/mask-v2.png">
        </div>
      </div>

      <div class="content-right">
        <div class="gen-right-subwrap">
            <div class="card-item" style="height:466px;">
                <p class="card-title">全县生产总值三次产业构成</p>
                <div class="card-main" style="height:392px;padding-top:20px;">
                    <common-bar-chart ref="gdpThreeBar" :config="gdpThreeBarconfig"></common-bar-chart>
                </div>
            </div>
            <div class="card-item" style="height:376px;">
                <p class="card-title">规模以上工业增加值增长速度</p>
                <div class="card-main" style="height:282px; padding:20px;">
                    <common-line-chart ref="industrialAdd" :config="industrialAddConfig"></common-line-chart>
                </div>
            </div>
            <div class="card-item" style="height:414px;">
                <p class="card-title">居民消费价格比上年涨跌幅度</p>
                <div class="card-main" style="height:320px; padding:20px;">
                    <common-line-chart ref="perCpiAdd" :config="perCpiAddConfig"></common-line-chart>
                </div>
            </div>
            <div class="card-item" style="height:505px;margin-top:-90px;">
                <p class="card-title">2018年规模以上工业企业利润总额</p>
                <div class="card-main" style="height:450px;">
                    <ul class="total-profit-list">
                        <li class="profit-item item-head">
                            <p class="item-name">指标</p>
                            <p class="item-grow">比上年增长（％）</p>
                        </li>
                        <li class="profit-item item-subhead">
                            <p class="item-name">规模以上工业</p>
                            <p class="item-grow">211.5</p>
                        </li>
                        <li class="profit-item">
                            <p class="item-name">其中：国有控股企业</p>
                            <p class="item-grow">141.4</p>
                        </li>
                        <li class="profit-item">
                            <p class="item-name">其中：集体企业</p>
                            <p class="item-grow">-25.0</p>
                        </li>
                        <li class="profit-item">
                            <p class="item-name">股份制企业</p>
                            <p class="item-grow">-186.1</p>
                        </li>
                        <li class="profit-item">
                            <p class="item-name">其他</p>
                            <p class="item-grow">-38.5</p>
                        </li>
                        <li class="profit-item">
                            <p class="item-name">其中：集体企业</p>
                            <p class="item-grow">-25.0</p>
                        </li>
                        <li class="profit-item">
                            <p class="item-name">股份制企业</p>
                            <p class="item-grow">-186.1</p>
                        </li>
                        <li class="profit-item">
                            <p class="item-name">其他</p>
                            <p class="item-grow">-38.5</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-item" style="height:440px;width:1240px;">
                <p class="card-title">固定资产投资及其增长速度</p>
                <div class="card-main" style="height:386px;padding:20px;box-sizing:border-box;">
                    <common-dualarea-chart ref="fixedAssetsLine" :config="fixedAssetsLineLineConfig">
                    </common-dualarea-chart>
                </div>
            </div>
        </div>
        <div style="width:610px;">
            <div class="card-item" style="height:479px;margin-bottom:20px;">
                <p class="card-title">2014-2018年住户存款余额及其增长速度</p>
                <div class="card-main" style="height:385px;padding:20px 0;">
                    <common-mix-chart ref="balanceGrowMixChart" :config="balanceGrowMixConfig"></common-mix-chart>
                </div>
            </div>
            <div class="card-item" style="height:414px;margin-bottom:20px;">
                <p class="card-title">教育、卫生医疗建设</p>
                <div class="card-main edu-health-wrap" style="height:360px;">
                    <div class="edu-health-item">
                        <p class="title">全市各类学校</p>
                        <p class="number">332&nbsp;<span>所</span></p>
                    </div>
                    <div class="edu-health-item">
                        <p class="title">高中阶段入学率</p>
                        <p class="number">94&nbsp;<span>%</span></p>
                    </div>
                    <div class="edu-health-item">
                        <p class="title">6周岁以上入学率</p>
                        <p class="number">100&nbsp;<span>%</span></p>
                    </div>
                    <div class="edu-health-item">
                        <p class="title">家庭困难寄宿学生</p>
                        <p class="number">7301&nbsp;<span>人</span></p>
                    </div>
                    <div class="edu-health-item">
                        <p class="title">政府生活补贴</p>
                        <p class="number">807.36&nbsp;<span>万元</span></p>
                    </div>
                    <div class="edu-health-item">
                        <p class="title">全市卫生医疗机构</p>
                        <p class="number">891&nbsp;<span>家</span></p>
                    </div>
                    <div class="edu-health-item">
                        <p class="title">卫生院床位</p>
                        <p class="number">2556&nbsp;<span>张</span></p>
                    </div>
                    <div class="edu-health-item">
                        <p class="title">医疗卫生专业人员</p>
                        <p class="number">2145&nbsp;<span>人</span></p>
                    </div>
                    <div class="edu-health-item">
                        <p class="title">县直医院床位</p>
                        <p class="number">1031&nbsp;<span>张</span></p>
                    </div>
                </div>
            </div>
            <div class="card-item" style="height:427px;">
                <p class="card-title">近年全市居民受教育情况</p>
                <div class="card-main" style="height:333px;padding:20px 0;">
                    <common-line-chart ref="eduResidentsLine" :config="eduResidentsLineConfig"></common-line-chart>
                </div>
            </div>
        </div>
        <div style="width:610px;">
            <div class="card-item" style="height:348px;margin-bottom:20px;">
                <p class="card-title">能源生产折标准煤</p>
                <div class="card-main energy-box" style="height:294px;">
                    <p class="energy-name">一次能源生产折标准煤（万吨）</p>
                    <p class="energy-number">
                        <span>571.14</span>
                        <span>2.4%<img class="top-arrow" src='../../assets/imgs/v2/red-arrow.png'></span>
                    </p>
                    <p class="energy-name">二次能源生产折标准煤（万吨）</p>
                    <p class="energy-number">
                        <span>1087.3</span>
                        <span>33.3%<img class="bottom-arrow" src='../../assets/imgs/v2/red-arrow.png'></span>
                    </p>
                </div>
            </div>
            <div class="card-item" style="height:472px;margin-bottom:20px;">
                <p class="card-title">能源工业投资</p>
                <div class="card-main">
                    <p class="invest-title">
                        全年能源工业投资完成（万元）
                        <span class="title-num">153313</span>
                        <span class="title-percent">33%<img class="top-arrow" src='../../assets/imgs/v2/red-arrow.png'></span>
                    </p>
                    <common-pieNew-chart style="height:220px;" ref="energyInvestPie" :config="energyInvestPieConfig"></common-pieNew-chart>
                    <div>
                        <div class="invest-legend">
                            <span class="invest-txt" style="display:inline-block;width:190px;"><i class="coal-color"></i>煤炭工业投资</span>
                            <span class="invest-number">22017</span>
                            <span class="invest-txt">万元</span>
                            <span class="invest-percent">363%<img class="top-arrow" src='../../assets/imgs/v2/red-arrow.png'></span>
                        </div>
                        <div class="invest-legend">
                            <span class="invest-txt" style="display:inline-block;width:190px;"><i class="electric-color"></i>电力、热力工资投资</span>
                            <span class="invest-number">3595</span>
                            <span class="invest-txt">万元</span>
                            <span class="invest-percent">28.4%<img class="top-arrow" src='../../assets/imgs/v2/red-arrow.png'></span>
                        </div>
                        <div class="invest-legend">
                            <span class="invest-txt" style="display:inline-block;width:190px;"><i class="other-color"></i>其他</span>
                            <span class="invest-number">127701</span>
                            <span class="invest-txt">万元</span>
                            <!-- <span class="invest-percent">363％<img class="top-arrow" src='../../assets/imgs/v2/red-arrow.png'></span> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-item" style="height:500px;">
                <p class="card-title">用电总量</p>
                <div class="card-main">
                    <p class="total-electricity">全年全县全社会用电总量（万千瓦时）<span>39510</span></p>
                    <common-pieNew-chart style="height:365px;" ref="totalElectricityPie" :config="totalElectricityPieConfig"></common-pieNew-chart>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import GovMapChart from '@/components/government/gov-map-chart.vue';
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import CommonDualareaChart from "@/components/common/common-dualarea-chart.vue";
  import CommonMixChart from "@/components/common/common-mix-chart.vue";
  import CommonBarChart from "@/components/common/common-bar-chart.vue";
  import CommonLineChart from "@/components/common/common-line-chart.vue";


  import RoadDetailChart from "./road-detail-chart.vue";

  export default {
    name: "AdministrativeManager",
    components: {
      GovMapChart,
      CommonPieNewChart,
      CommonDualareaChart,
      CommonMixChart,
      CommonBarChart,
      RoadDetailChart,
      CommonLineChart
    },
    data() {
      return {
        activeBtn: 'town',
        // 历年全县总人口数
        populationMixLineConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            legend: {
              data: ['总人口', '城镇', '乡村'],
              textStyle: {
                fontSize: 18
              }
            },
            id: 'populationMixLine',
            xAxis: ['2014年', '2015年', '2016年', '2017年', '2018年', '2019年'],
            yAxis: [{
                type: 'value',
                name: '(万人)',
                min: 0,
                max: 80,
                interval: 10,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                show: false,
              }
            ],
            series: [{
                name: '城镇',
                type: 'bar',
                data: [29.38, 30.6, 31.86, 33.08, 34.13, 34.52],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#006AE2' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00FFEB' // 100% 处的颜色
                  }],
                },
                barWidth: 30, //柱图宽度
              },
              {
                name: '乡村',
                type: 'bar',
                data: [45.5, 44.59, 43.8, 43.02, 42.31, 41.65],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#00FAEA' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#10C49B' // 100% 处的颜色
                  }],
                },
                barWidth: 30, //柱图宽度
              },
              {
                name: '总人口',
                type: 'line',
                yAxisIndex: 1,
                data: [74.88, 75.2, 75.66, 76.11, 76.45, 76.88]
              }
            ]
          }
        },

        //人均可支配收入---城镇
        townIncomeMixLineConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            legend: {
              data: ['城镇居民可支配收入(元)', '比上年增长（%）'],
              textStyle: {
                fontSize: 18
              }
            },
            id: 'townIncomeMixLine',
            xAxis: ['2014年', '2015年', '2016年', '2017年', '2018年'],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 30000,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                type: 'value',
                name: '',
                min: 0,
                max: 25,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              }
            ],
            series: [{
                name: '城镇居民可支配收入(元)',
                type: 'bar',
                data: [21615, 23344, 24065, 26229, 28379],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#016AE2' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#0DF9EB' // 100% 处的颜色
                  }],
                },
                barWidth: 30, //柱图宽度
              },
              {
                name: '比上年增长（%）',
                type: 'line',
                yAxisIndex: 1,
                data: [7.7, 7.5, 5.4, 6.6, 8.2]
              }
            ]
          }
        },

        //人均可支配收入---农村
        countrysideIncomeMixLineConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            legend: {
              data: ['农村居民可支配收入(元)', '比上年增长（%）'],
              textStyle: {
                fontSize: 18
              }
            },
            id: 'countrysideIncomeMixLine',
            xAxis: ['2014年', '2015年', '2016年', '2017年', '2018年'],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 12000,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                type: 'value',
                name: '',
                min: 0,
                max: 20,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              }
            ],
            series: [{
                name: '农村居民可支配收入(元)',
                type: 'bar',
                data: [9294, 9921, 10467, 11178, 11939],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#016AE2' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#0DF9EB' // 100% 处的颜色
                  }],
                },
                barWidth: 30, //柱图宽度
              },
              {
                name: '比上年增长（%）',
                type: 'line',
                yAxisIndex: 1,
                data: [12, 6.8, 5.5, 6.8, 6.8]
              }
            ]
          }
        },

        //海关进出口
        customsInOutMixLineConfig: {
            request: {
            url: "url",
            params: {},
          },
          option: {
            legend: {
              data: ['海关进出口总额(万美元)', '比上年增长（%）'],
              textStyle: {
                fontSize: 18
              }
            },
            id: 'customsInOutMixLine',
            xAxis: ['2014', '2015', '2016', '2017', '2018'],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 15000,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                type: 'value',
                name: '',
                min: -40.0,
                max: 40.0,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              }
            ],
            series: [{
                name: '海关进出口总额(万美元)',
                type: 'bar',
                data: [7381, 7344, 6727, 7806, 9081],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#6c43f7' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#b49eff' // 100% 处的颜色
                  }],
                },
                barWidth: 30, //柱图宽度
              },
              {
                name: '比上年增长（%）',
                type: 'line',
                yAxisIndex: 1,
                data: [-23.4, -0.5, -8.4, 23.1, 16.4]
              }
            ]
          }
        },
        //生产总值增长速度
        gdpMixConfig:{
            request: {
            url: "url",
            params: {},
          },
          option: {
            legend: {
              data: ['地区生产总值（亿元）', '比上年增长（%）'],
              textStyle: {
                fontSize: 18
              }
            },
            id: 'gdpMixLine',
            xAxis: ['2014年', '2015年', '2016年', '2017年', '2018年'],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 200.00,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                type: 'value',
                name: '',
                min: -5,
                max: 15,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              }
            ],
            series: [{
                name: '地区生产总值（亿元）',
                type: 'bar',
                data: [165.60, 161.71, 167.71, 170.27, 168.61],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#6C43F7' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#B2A2FF' // 100% 处的颜色
                  }],
                },
                barWidth: 30, //柱图宽度
              },
              {
                name: '比上年增长（%）',
                type: 'line',
                yAxisIndex: 1,
                data: [6.3, 2.1, 2.1, 1.4, -2.9],
                itemStyle:{
                    color:'#00D9FB'
                }
              }
            ]
          }
        },

        //消费品增长速度
        cpiMixConfig:{
            request: {
            url: "url",
            params: {},
          },
          option: {
            legend: {
              data: ['社会消费品零售额（亿元）', '比上年增长（%）'],
              textStyle: {
                fontSize: 18
              }
            },
            id: 'cpiMixLine',
            xAxis: ['2014年', '2015年', '2016年', '2017年', '2018年'],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 80,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                type: 'value',
                name: '',
                min: 0,
                max: 30,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              }
            ],
            series: [{
                name: '社会消费品零售额（亿元）',
                type: 'bar',
                data: [48.86, 53.06, 56.3, 60.5, 65.4],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#6C43F7' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#B2A2FF' // 100% 处的颜色
                  }],
                },
                barWidth: 30, //柱图宽度
              },
              {
                name: '比上年增长（%）',
                type: 'line',
                yAxisIndex: 1,
                data: [11.4, 5.1, 6.2, 7.4, 8.1],
                itemStyle:{
                    color:'#00D9FB'
                }
              }
            ]
          }
        },

        // 全县地图
        countyMapConfig: {
          request: {
            url: "url",
            params: {}
          }
        },

        // 本年全县人口占比
        populationProportionPieConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'populationProportionPie',
            title: '',
            color: ['#FF7E00', '#3FECFF', '#0DC39C', '#E5CE10', '#AA89BD'],
            legend: {
              show: true,
              left: '68%',
              top: '25%',
              itemGap: 15, //图例之间的间距
              orient: 'vertical',
              textStyle: {
                color: '#fff',
                fontSize: 15,
              },
              data: ['0-18岁', '18-45岁', '45-50岁', '50-74岁', '74岁以上']
            },
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [{
              name: '',
              type: 'pie',
              radius: ['50%', '65%'],
              center: ['33%', '55%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'outer',
                  formatter: "{c}",
                  fontSize: '15'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '15',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{
                  value: 30248,
                  name: '0-18岁'
                },
                {
                  value: 103891,
                  name: '18-45岁'
                },
                {
                  value: 75620,
                  name: '45-50岁'
                },
                {
                  value: 67842,
                  name: '50-74岁'
                },
                {
                  value: 19024,
                  name: '74岁以上'
                }
              ]
            }]
          }
        },

        // 本年全县人口自然增长率
        populationGrowthRateLineConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'populationGrowthRateLine',
            x: ['2014年', '2015年', '2016年', '2017年', '2018年', '2019年'],
            y: [{
              axis: {
                min: 0,
                max: 14,
                splitNumber: 7
              },
              title: '出生率',
              data: [10.26, 9.36, 9.97, 10.73, 8.07, 9.96],
              startColor: "#10C49B",
              endColor: "#EAC921"
            }, {
              title: '死亡率',
              data: [5.84, 5.15, 3.78, 4.90, 3.55, 3.98],
              startColor: "#FBCC13",
              endColor: "#EAC921"
            }, {
              title: '增长率',
              data: [4.42, 4.20, 6.19, 5.83, 4.52, 4.32],
              startColor: "#3FECFF",
              endColor: "#3FECFF"
            }]
          }
        },

        // 本年全县土地使用占比
        countyLandPieConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'countyLandPie',
            title: '',
            color: ['#3FECFF', '#006EE2', '#0DC39C', '#E5CE10', '#FF7E00', '#AA89BD'],
            legend: {
              show: true,
              left: '20%',
              top: '80%',
              itemGap: 30, //图例之间的间距
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 15,
              },
              data: ['行政区域用地', '耕地面积', '园林绿地', '城市建设', '建成区绿化', '居住用地']
            },
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [{
              name: '',
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'outer',
                  formatter: "{d}%",
                  fontSize: '19'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '15',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{
                  value: 23,
                  name: '行政区域用地'
                },
                {
                  value: 27,
                  name: '耕地面积'
                },
                {
                  value: 18,
                  name: '园林绿地'
                },
                {
                  value: 17,
                  name: '城市建设'
                },
                {
                  value: 10,
                  name: '建成区绿化'
                },
                {
                  value: 5,
                  name: '居住用地'
                }
              ]
            }]
          }
        },

        // 本地全县区域经济排名TOP10
        regionalEconomiesBarConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'regionalEconomiesBar',
            xAxis: ['玉山镇', '巴城镇', '花桥镇', '周市镇', '甘亭镇', '曲亭镇', '苏堡镇', '万安镇', '张浦镇', '淹底乡'],
            y: [{
              axis: {
                min: 0,
                max: 25000
              },
              title: '',
              data: [24500, 14900, 12000, 11850, 10250, 9850, 8950, 7550, 5850, 3250, ],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#FFC755' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FF6334' // 100% 处的颜色
                }],
              },
              stack: '1'
            }]
          }
        },

        //固定、移动电话用户数
        phoneMixLineConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            legend: {
              data: ['固话', '移动电话'],
              right: 0
            },
            id: 'phoneMixLine',
            xAxis: ['2014', '2015', '2016', '2017', '2018'],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 70,
                interval: 10,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                show: false,
              }
            ],
            series: [{
                name: '固话',
                type: 'bar',
                data: [5.15, 6.14, 4.04, 2.78, 1.89],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#FBCC13' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FBCC13' // 100% 处的颜色
                  }],
                },
                barWidth: 18, //柱图宽度
              },
              {
                name: '移动电话',
                type: 'bar',
                data: [50.80, 49.48, 51.95, 55.63, 57.43],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#3FECFF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#00FCEB' // 100% 处的颜色
                  }],
                },
                barWidth: 18, //柱图宽度
              }
            ]
          }
        },

        //  公路建设情况--计划建设
        roadPlanConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: 'roadPlan',
            graphicTxt: '2017年'
          }
        },

        // 公路建设情况--实际建设
        roadRealityConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: 'roadReality',
            graphicTxt: '2018年'
          }
        },

        //全县生产总值三次产业构成
        gdpThreeBarconfig: {
            request: {
                url: "url",
                params: {

                },
            },
            option:{
                id:'threeIndustrialBar',
                xAxis:['2014年', '2015年', '2016年','2017年','2018年'],
                y:[{
                    axis:{
                        min:0,
                        max:100,
                        name:'单位(%)'
                    },
                    title:'第一产业',
                    data:[7.2,6.7,6.7,6.0,5.7],
                    color:'#2D5895',
                    stack:'1',
                    position: 'inside'
                },{
                    title:'第二产业',
                    data:[63.8, 59.1, 57.1, 54.8, 49.3],
                    color:'#317CB9',
                    stack:'1',
                    position: 'inside'
                },{
                    title:'第三产业',
                    data:[29.0, 34.2, 36.2, 39.2, 45.0],
                    color:'#48B5E9',
                    stack:'1',
                    position: 'inside'
                }]
            }
        },

        //规模以上工业增加值增长速度
        industrialAddConfig: {
            request: {
                url: "url",
                params: {

                }
            },
            option: {
                id: 'industrialAdd',
                boundaryGap:true,
                x: ['2014年', '2015年', '2016年', '2017年', '2018年'],
                y: [{
                    title: "单位（％）",
                    data: [9.0, -2.6, -1.4, -14.0, -20.0,],
                    color: '#F6CE11',
                    axis: {
                        min:-20,
                        max:30
                    },
                    label:{
                        show:true,
                        color: "#F6CE11",
                        fontSize: 18
                    }
                }]
            }
        },

        //居民消费价格比上年涨跌幅度
        perCpiAddConfig: {
            request: {
                url: "url",
                params: {

                }
            },
            option: {
                id: 'perCpiAdd',
                boundaryGap:true,
                x: ['2014年', '2015年', '2016年', '2017年', '2018年'],
                y: [{
                    title: "单位（％）",
                    data: [-1.4, 1.7, 1.0, 0.5, 1.8],
                    color: '#77F7E7',
                    axis: {
                        min:-2,
                        max:4
                    },
                    label:{
                        show:true,
                        color: "#77F7E7",
                        fontSize: 18
                    }
                }]
            }
        },

        //2018年规模以上工业企业利润总额
        totalProfitNumbersConfig: {
            request: {
            url: "url",
            params: {}
          },
          option: {
            height: 450,
            tableColor: '#6BEEFF',
            tableHeader: [{
              prop: "index",
              title: "指标",
            }, {
              prop: "grow",
              title: "比上年增长（％）",
            }],
            tableData: [{
              index: '规模以上工业',
              grow: '211.5'
            },{
              index: '其中：国有控股企业',
              grow: '141.4'
            },{
              index: '其中：集体企业',
              grow: '-25.0'
            },{
              index: '股份制企业',
              grow: '-186.1'
            },{
              index: '其他',
              grow: '-38.5'
            },{
              index: '其中：集体企业',
              grow: '-25.0'
            },{
              index: '股份制企业',
              grow: '-186.1'
            },{
              index: '其他',
              grow: '-38.5'
            }]
          }
        },

        //固定资产投资及其增长速度
        fixedAssetsLineLineConfig: {
            request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'fixedAssetsLine',
            x: ['2014', '2015', '2016', '2017', '2018'],
            boundaryGap: true,
            y: [{
              axis: {
                min: 0,
                max: 200,
                splitLine:'notShow'
              },
              title: '固定资产投资（亿元）',
              data: [141.16, 163.8, 168.0, 67.8, 36.5],
              startColor: "#77F7E7",
              endColor: "#142B4A"
            }, {
              axis: {
                min: -50,
                max:  20,
                splitNumber: 7,
                offset: -10,
                splitLine:'notShow'
              },
              title: '比上年增长（％）',
              data: [1.6, 16.0, 2.6, 3.9, -46.2],
              startColor: "#FF991F",
              endColor: "#142B4A"
            }]
          }
        },

        //2014-2018年住户存款余额及其增长速度
        balanceGrowMixConfig: {
            request: {
            url: "url",
            params: {},
          },
          option: {
            legend: {
              data: ['住户存款（亿元）', '比上年增长（%）'],
              textStyle: {
                fontSize: 18
              }
            },
            id: 'balanceGrowMixLine',
            xAxis: ['2014年', '2015年', '2016年', '2017年', '2018年'],
            yAxis: [{
                type: 'value',
                name: '',
                min: 0,
                max: 200,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              },
              {
                type: 'value',
                name: '',
                min: 0,
                max: 25,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                }, //去除网格线
              }
            ],
            series: [{
                name: '住户存款（亿元）',
                type: 'bar',
                data: [135.78, 145.92, 160.95, 176.95, 191.88],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#016AE2' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#0DF9EB' // 100% 处的颜色
                  }],
                },
                barWidth: 30, //柱图宽度
              },
              {
                name: '比上年增长（%）',
                type: 'line',
                yAxisIndex: 1,
                data: [10.1, 7.0, 10.3, 9.9, 8.4],
                itemStyle:{
                    color:'#EDA652'
                }
              }
            ]
          }
        },

        //近年全市居民受教育情况
        eduResidentsLineConfig: {
            request: {
                url: "url",
                params: {

                }
            },
            option: {
                id: 'eduResidentsLine',
                boundaryGap:true,
                yOffset:-10,
                x: ['2014年', '2015年', '2016年', '2017年', '2018年'],
                y: [{
                    title: "小学",
                    data: [52122, 72961, 49810, 49370, 48351],
                    color: '#ECCE1B',
                    axis: {
                        min:0,
                        max:80000
                    }
                },{
                    title: "初中",
                    data: [24762, 22647, 22280, 21697, 22938],
                    color: '#2867E2',
                },{
                    title: "普通高中",
                    data: [14298, 13716, 13582, 13134, 12424],
                    color: '#57EE0D',
                },{
                    title: "中等职业教育",
                    data: [1889, 1917, 1986, 1662, 1317],
                    color: '#4FD3D9',
                }]
            }
        },

        //能源工业投资
        energyInvestPieConfig: {
            request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'energyInvestPie',
            title: '',
            color: ['#3EA2FE', '#6C43F7', '#4BC89B'],
            tooltip: {
              trigger: 'item',
              formatter: "{b} : {c}万元 ({d}%)"
            },
            series: [{
              name: '',
              type: 'pie',
              roseType: false,
              radius: ['20%', '80%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'outer',
                  formatter: "{d}%",
                  fontSize: '15'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '15',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                    length: 10,
                    length2: 20
                }
            },
              data: [{
                  value: 22017,
                  name: '煤炭工业'
                },
                {
                  value: 3595,
                  name: '电力、热力'
                },
                {
                  value: 127701,
                  name: '其他'
                }
              ]
            }]
          }
        },

        //用电总量
        totalElectricityPieConfig: {
            request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'totalElectricityPie',
            title: '',
            color: ['#3EA2FE', '#6C43F7', '#EDA652', '#77F7E7'],
            legend: {
              show: true,
              left: '20%',
              top: '90%',
              itemGap: 30, //图例之间的间距
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 15,
              },
              data: ['第一产业', '第二产业', '第三产业', '城乡居民']
            },
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [{
              name: '用电总量',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '45%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'outside',
                  formatter: "{d}%",
                  fontSize: '19'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '15',
                    fontWeight: 'bold'
                  }
                }
              },
              data: [{
                  value: 3825,
                  name: '第一产业'
                },
                {
                  value: 157732,
                  name: '第二产业'
                },
                {
                  value: 28882,
                  name: '第三产业'
                },
                {
                  value: 34042,
                  name: '城乡居民'
                }
              ]
            }]
          }
        }
      }
    },
    methods: {
      handleChangeClick(param) {
          this.activeBtn = param;
          this.$nextTick(function() {
              param == 'countryside' ? this.$refs.countrysideIncomeMixLine.initChart() : this.$refs.townIncomeMixLine.initChart()
          });
      }
    },
    mounted() {
      this.$refs.populationMixLine.initChart();
      //   this.$refs.countyMap.initChart();
    //   this.$refs.populationProportionPie.initChart();
      this.$refs.countyLandPie.initChart();
      this.$refs.populationGrowthRateLine.initChart();
      //   this.$refs.regionalEconomiesBar.initChart();
      this.$refs.phoneMixLine.initChart();
      this.$refs.gdpMixChart.initChart();
      this.$refs.cpiMixChart.initChart();
      this.$refs.townIncomeMixLine.initChart();
      this.$refs.customsInOutMixLine.initChart();
      this.$refs.roadDetailPlan.initChart();
      this.$refs.roadDetailReality.initChart();
      this.$refs.gdpThreeBar.initChart();
      this.$refs.industrialAdd.initChart();
      this.$refs.perCpiAdd.initChart();
      this.$refs.fixedAssetsLine.initChart();
      this.$refs.balanceGrowMixChart.initChart();
      this.$refs.eduResidentsLine.initChart();
      this.$refs.energyInvestPie.initChart();
      this.$refs.totalElectricityPie.initChart();

    }
  }

</script>

<style scoped lang="scss" type="text/scss">
    $content-lr-w: 610px;

    .content-right {
        display: flex;
        >div{
            margin-left: 20px;
        }
    }

  .card-item-min {
    width: 740px;
  }

  .right-mitem-one {
    width: 500px;
    height: 55px;
    background: rgba(63, 236, 255, 0.1);
    box-shadow: 0px 0px 2px 3px rgba(13, 151, 193, 0.26);
    border-radius: 14px;
    margin: 25px auto 0;
    padding: 0;

    .right-list-span-one {
      display: inline-block;
      width: 56px;
      height: 32px;
      font-size: 14px;
      font-family: NotoSansHans-Regular;
      font-weight: 400;
      color: rgba(63, 236, 255, 1);
      line-height: 18px;
      margin: 22px 19px;
    }

    .right-list-span-two {
      display: inline-block;
      background: url("../../assets/imgs/img_tree_one.png") repeat-x;
      width: 45px;
      height: 25px;
      margin: 10px 30px 0 0;
    }

    .right-list-spanT-two {
      display: inline-block;
      background: url("../../assets/imgs/img_tree_two.png") repeat;
      width: 40px;
      height: 27px;
      margin-top: 10px;
      margin-right: 35px;
    }

    .right-list-span-three {
      width: 63px;
      height: 24px;
      font-size:36px;
      font-family:Digitalism;
      font-weight: 400;
      color: rgba(233, 244, 255, 1);
      line-height: 20px;
      margin-right: 10px;
    }

    .right-list-span-four {
      margin-right: 5px;
      width: 70px;
      height: 24px;
      font-size:30px;
      font-family:Digitalism;
      font-weight: 400;
      color: rgba(251, 204, 19, 1);
      line-height: 20px;
      margin-left: 22px;
      margin-right: 10px;
    }

    i {
      font-style: normal;
      font-size: 14px;
      height: 14px;
      font-weight: 400;
      color: rgba(63, 236, 255, 1);
      line-height: 20px;
    }
  }

  .card-main {
    //   padding: 0 34px;

      .weather-box {
          display: flex;
          float: left;
          margin: 60px auto 0;

          .weather-item {
              flex: auto;
            //   margin: 0 10px;

              .txt {
                font-size:22px;
                font-family:Source Han Sans CN;
                font-weight:500;
                color: #6BEEFF;
              }

              .number {
                font-size:40px;
                font-family:Digitalism;
                font-weight:400;
                color:#fff;
                margin-top: 25px;

                >span {
                    font-size: 26px;
                }
              }
          }
      }
  }

  .card-main-road {
      display: flex;
      justify-content: center;
      height: 347px;

      .road-detail-box {
          flex: auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;

          .road-txt {
            font-size:18px;
            font-family:Source Han Sans CN;
            font-weight:500;
            color:#E9F4FF;

            .road-num {
                font-size: 30px;
                color: #3FECFF;
            }

            .highway-num {
                font-size: 30px;
                color: #FBCC13;
            }

            .bus-num {
                font-size: 30px;
                color: #16BC90;
            }
          }

          .road-txt-bus {
              position: absolute;
              left: 30px;
              top: 172px;
          }
      }
  }

  .insurance-warp {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .insurance-box {
          flex: none;
          text-align: center;
          .txt {
              font-size: 22px;
              font-weight: 500;
              color: #6BEEFF;
              margin-top: 10px;
          }
          .num {
              font-size: 40px;
              font-family:Digitalism;
              color: #FFFFFF;
              margin-top: 30px;
          }
      }
  }

  .right-titem-one:first-child {
      background:rgba(22,188,144,0.1);
      box-shadow:0px 0px 2px 3px rgba(13,175,144,0.26);
  }

  .right-titem-one {
    width: 140px;
    height: 210px;
    background: rgba(63, 236, 255, 0.1);
    box-shadow: 0px 0px 2px 3px rgba(13, 151, 193, 0.26);
    border-radius: 14px;
    margin: 40px 20px 0 20px;
    padding: 0;
    float: left;

    .titem-span {
      margin: 15px 15px 10px 18px;
      display: inline-block
    }

    .titem-span-two {
      width: 50px;
      height: 37px;
      font-size: 48px;
      font-family: NotoSansHans-Regular;
      font-weight: 400;
      color: rgba(251, 204, 19, 1);
      margin: 18px 42px 10px 18px;
      display: inline-block;
    }

    .titem-span-three {
      width: 117px;
      height: 38px;
      background:rgba(22,188,144,0.1);
      box-shadow:0px 0px 2px 3px rgba(13,175,144,0.26);
      border-radius: 5px;
      display: inline-block;
      margin: 30px 0 0 15px;
      text-align: center;
      font-size: 16px;
      line-height: 38px;
    }

    .titem-span-bottom {
      width: 85px;
      height: 16px;
      font-size: 16px;
      font-family: NotoSansHans-Regular;
      font-weight: 400;
      color: rgba(63, 236, 255, 1);
      margin: 15px 0 0 15px;
      display: inline-block;
    }

    i {
      font-style: normal;
      font-size: 14px;
      height: 14px;
      font-weight: 400;
      color: rgba(63, 236, 255, 1);
      line-height: 20px;
    }

    .titem-spanT-bottom {
      width: 88px;
      height: 28px;
      font-size: 36px;
      font-family: NotoSansHans-Regular;
      font-weight: 400;
      color: #96E131;
      margin-left: 15px;
      margin-top: 2px;
      display: inline-block;
    }

    .titem-spanS-bottom {
      display: inline-block;
      margin: 3px 0 0 15px;
      color: #96E131;
      font-size: 16px;
    }
  }

  .gen-left-subwrap {
      display: flex;
      flex-wrap: wrap;
      >.card-item {
          flex: none;
          &:nth-child(even) {
              margin-left: 20px;
          }
          &:not(:last-of-type) {
              margin-bottom: 20px;
          }
      }
  }

  .gen-right-subwrap {
      @extend .gen-left-subwrap;
      width: 1250px;
      align-items: flex-start;
  }
  .town-countryside-box {
      display: flex;
      width: 164px;
      height: 25px;
      border: 1px solid #1FD5BD;
      border-radius: 7px;
      overflow: hidden;
      margin: 16px auto 0;

      >.town-countryside-btn {
          width: 82px;
          height: 25px;
          line-height: 25px;
          color: #fff;
          border: none;
          outline: none;
          background:transparent;
          cursor: pointer;
      }
      >.town-countryside-btn.active {
          background:linear-gradient(90deg,#029ED8,#20D8BC);
        //   box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.65);
      }
  }

  .card-left-listOne {
        .card-left-list-One {
          .card-list-spanTwo {
            display: inline-block;
            background: url("../../assets/imgs/img_bus.png") repeat-x;
            width: 364px;
            height: 14px;
          }

          .card-list-spanThree {
            width: 63px;
            height: 24px;
            font-size: 30px;
            color: rgba(22, 188, 144, 1);
            line-height: 40px;
            margin-left: 20px;
            margin-right: 5px;
          }
        }

        .card-left-list-Two {
          .card-list-spanTwo {
            display: inline-block;
            background: url("../../assets/imgs/img_car.png") repeat-x;
            width: 350px;
            height: 14px;
          }

          .card-list-spanThree {
            width: 63px;
            height: 24px;
            font-size: 30px;
            color: #F6A330;
            line-height: 40px;
            margin-left: 33px;
            margin-right: 5px;
          }
        }

        .card-left-list-Three {
          .card-list-spanTwo {
            display: inline-block;
            width: 350px;
            height: 25px;
            line-height: 20px;
          }

          .card-list-spanThree {
            width: 63px;
            height: 24px;
            font-size: 28px;
            color: #00FFFF;
            line-height: 40px;
            margin-left: 15px;
          }
        }

        .card-left-list-Four {
          .card-list-spanTwo {
            display: inline-block;
            width: 350px;
            height: 25px;
            line-height: 20px;
          }

          .card-list-spanThree {
            width: 63px;
            height: 24px;
            font-size: 28px;
            color: #E9C30E;
            line-height: 40px;
            margin-left: 15px;
          }
        }

        .card-list-spanOne {
          display: inline-block;
          width: 76px;
          height: 14px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(233, 244, 255, 1);
          margin-left: 21px;
          margin-right: 20px;
          line-height: 14px;
        }

        i {
          font-style: normal;
          font-size: 14px;
          height: 14px;
          font-weight: 400;
          line-height: 20px;
        }
      }


  .gov-left {
    width: 520px;
    height: 143px;

    .gov-list-left {
      float: left;
      width: 180px;
    }

    .left-item {
      width: 70px;
      height: 70px;
      float: left;

      > p {
        color: #3FECFF;
        font-size: 14px;
        margin: 14px 0 12px 12px;
        height: 14px;
        font-family: SourceHanSansCN-Normal;
        font-weight: 400;
        line-height: 14px;
      }

      > span {
        color: #FBCC13;
        display: inline-block;
        margin-left: 12px;
        height: 22px;
        line-height: 22px;
        font-size: 24px;
        width: 37px;
        vertical-align: bottom;
      }

      > i {
        font-style: normal;
        font-size: 14px;
        vertical-align: bottom;
      }
    }
  }

    .box-1 {
        top: 155px;
        left: $content-lr-w + 200px;
    }
    .box-2 {
        top: 155px;
        left: $content-lr-w + 740px;
    }
    .box-3 {
        top: 155px;
        right: $content-lr-w + 200px;
    }
    .box-4 {
        top: 276px;
        left: $content-lr-w + 200px;
    }
    .box-5 {
        top: 276px;
        left: $content-lr-w + 740px;
    }
    .box-6 {
        top: 276px;
        right: $content-lr-w + 200px;
    }

    .gdp-cpi-box {
        width: 936px;
        background: rgba(14,44,74,0.3);
        position: absolute;
        bottom: 30px;
        z-index: 9;

        .card-title {
            padding-left: 17px;
            line-height: 54px;
            color: #eaf4ff;
            font-size: 22px;
        }

        .gdp-cpi-main {
            height: 286px;
            padding: 10px;
            box-sizing: border-box;
        }
    }

    .gdp-cpi-box::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 54px;
        top: 0;
        left: 0;
        background: url('../../assets/imgs/v2/card-head.png') no-repeat;
    }

    .gdp-cpi-box::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: 0;
        left: 0;
        background: url('../../assets/imgs/card-bottom.png') no-repeat;
    }

    .gdp-box {
        left: $content-lr-w + 10px;
    }

    .cpi-box {
        right: $content-lr-w + 10px;
    }

  .gov-center {
    margin-top: 20px;
    width: 100%;
    height: 605px;
    margin-bottom: 22px;
    background-color: rgba(14, 44, 74, 0.3);

    .center-item {
      width: 132px;
      height: 72px;
      background: linear-gradient(180deg, rgba(16, 52, 89, 0.53), rgba(10, 26, 42, 0.53));
      border-radius: 3px;
      float: left;
      margin-left: 36px;
      margin-top: 32px;

      &:nth-child(1) {
        margin-left: 53px;
      }

      > p {
        color: #E9F4FF;
        font-size: 14px;
        margin: 14px 0 12px 0px;
        height: 14px;
        text-align: center;
        font-family: SourceHanSansCN-Normal;
        font-weight: 400;
        line-height: 14px;
      }

      > span {
        color: #FBCC13;
        display: inline-block;
        margin-left: 12px;
        height: 22px;
        line-height: 22px;
        font-size: 22px;
        width: 82px;
        vertical-align: bottom;
      }

      > i {
        font-style: normal;
        font-size: 14px;
        vertical-align: bottom;
      }
    }

    .center-map {
      width: 600px;
      height: 480px;
      margin: 80px auto 0;
    }
  }

  .gov-right {
    width: 520px;
    height: 143px;

    .gov-list-left {
      float: left;
      width: 180px;
    }

    .left-item {
      width: 70px;
      height: 70px;
      float: left;

      > p {
        color: #3FECFF;
        font-size: 14px;
        margin: 14px 0 12px 12px;
        height: 14px;
        font-family: SourceHanSansCN-Normal;
        font-weight: 400;
        line-height: 14px;
      }

      > span {
        color: #FBCC13;
        display: inline-block;
        margin-left: 12px;
        height: 22px;
        line-height: 22px;
        font-size: 24px;
        width: 37px;
        vertical-align: bottom;
      }

      > i {
        font-style: normal;
        font-size: 14px;
        vertical-align: bottom;
      }
    }
  }

  .gov-center-right {
    width: 510px;
    height: 115px;
    margin-top: 35px;

    .gov-list-right {
      float: left;
      width: 88px;
    }

    .left-item {
      width: 80px;
      height: 80px;
      float: left;

      > p {
        color: #3FECFF;
        font-size: 12px;
        margin: 14px 0 12px 0px;
        height: 14px;
        font-family: SourceHanSansCN-Normal;
        font-weight: 400;
        line-height: 14px;
        width: 80px;
      }

      > span {
        color: #FBCC13;
        display: inline-block;
        margin-right: 5px;
        height: 22px;
        line-height: 22px;
        font-size: 24px;
        width: 45px;
        vertical-align: bottom;
      }

      > i {
        font-style: normal;
        font-size: 14px;
        vertical-align: bottom;
      }
    }
  }

  .total-profit-list {
      width: 100%;

      .profit-item {
          display: flex;
          align-items: center;
          height: 50px;
          color: #EAF4FF;

          .item-name {
              padding-left: 30px;
          }

          .item-grow {
              padding-left: 160px;
          }

          .item-name,.item-grow {
              flex: 1;
              font-size: 20px;
          }

          &:nth-child(even) {
              background:rgba(20,43,74,1);
              opacity:0.7;
          }
      }

      .profit-item.item-head {
          color: #F6CE11;
      }
      .profit-item.item-subhead {
          color: #6BEEFF;
      }
  }

  .edu-health-wrap {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      flex-wrap: wrap;
      padding: 50px 40px;
      box-sizing: border-box;

      .edu-health-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 176px;
          &:nth-child(-n+3) {
              justify-content: flex-start;
          }
          &:nth-last-child(-n+3) {
              justify-content: flex-end;
          }
          .title {
            font-size:18px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:#6AECFE;
          }

          .number {
            font-size:40px;
            font-family:Digitalism;
            font-weight:400;
            color:#F6CE11;
            margin-top: 5px;

            >span {
                font-size:16px;
                font-family:Source Han Sans CN;
                font-weight:400;
                color:#EAF4FF;
            }
          }
      }
  }

  .energy-box {
    .energy-name {
        font-size:22px;
        font-family:Source Han Sans CN;
        font-weight:500;
        color:#6BEEFF;
        padding-left: 87px;
        margin: 40px 0 25px;

    }
    .energy-number {
        text-align: center;

        >span:first-child {
            font-size:36px;
            font-family:Digitalism;
            font-weight:400;
            color: #fff;
            margin-right: 183px;
        }

        >span:last-child {
            font-size:20px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color: #fff;
        }

        .top-arrow {
            width: 10px;
            vertical-align: middle;
            margin-left: 20px;
        }

        .bottom-arrow {
            width: 10px;
            vertical-align: middle;
            transform: rotate(180deg);
            margin-left: 20px;
        }
    }
  }

  .invest-title {
        font-size:24px;
        font-family:Source Han Sans CN;
        font-weight:500;
        color:#E9F4FF;
        text-align: center;
        margin-top: 38px;

        .title-num {
            font-size:36px;
            font-family:Digitalism;
            font-weight:400;
            color:#FBCC13;
            margin: 0 20px;
        }

        .title-percent {
            font-size:20px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:#fff;

            >img {
                width: 10px;
                vertical-align: middle;
                transform: rotate(180deg);
                margin-left: 10px;
            }
        }
  }

  .invest-legend {
        padding-left: 93px;
        margin-bottom: 10px;

        .coal-color {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 2px;
            background: #3EA2FE;
            margin-right: 8px;
        }

        .electric-color {
            @extend .coal-color;
            background: #6C43F7;
        }

        .other-color {
            @extend .coal-color;
            background: #4BC89B;
        }
        .invest-txt {
            font-size:18px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:#EAF4FF;
        }

        .invest-number {
            display: inline-block;
            width: 90px;
            font-size:24px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:#F6CE11;
        }

        .invest-percent {
            font-size:20px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color: #fff;
            margin-left: 30px;

            >.top-arrow {
                margin-left: 10px;
            }
        }
  }

  .total-electricity {
      margin-top: 38px;
      text-align: center;
      font-size:24px;
      font-family:Source Han Sans CN;
      font-weight:500;
      color:#E9F4FF;

      >span {
          margin-left: 20px;
          font-size:36px;
          font-family:Digitalism;
          font-weight:400;
          color:rgba(251,204,19,1);
          vertical-align: sub;
      }
  }
</style>
